<template>
  <div style="width: 100%">
    <template>
      <div v-if="mode === 'edit'">
        <van-calendar
          title="日历"
          :poppable="false"
          :show-confirm="false"
          :style="{ height: '500px' }"
          :min-date="minDate"
          :max-date="maxDate"
          @select="tapDate"
        />
        <!-- 表单 -->
        <van-popup v-model="show">
          <van-field v-model="today" name="日期" label="日期" />
          <van-form @submit="onSubmit">
            <van-field
              v-model="time"
              name="time"
              label="工时"
              placeholder="工时"
              :rules="[{ required: true, message: '请填写工时' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </van-popup>
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "calendar",
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit",
    },
    entityModel: {
      // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default: () => {},
    },
  },
  data() {
    return {
      minDate: new Date(2017, 0, 1),
      maxDate: new Date(2030, 12, 31),
      show: false,
      time: "",
      today: "",
    };
  },
  mounted() {},
  methods: {
    tapDate(day) {
      let selectDay = new Date(day);
      this.today = new Intl.DateTimeFormat("zh-CN", {
        dateStyle: "long",
      }).format(selectDay);
      this.showPopup();
    },
    showPopup() {
      this.show = true;
    },
    onSubmit(values) {
      console.log("submit", values);
      this.$emit("input", this.time);
      this.show = false;
    },
  },
};
</script>
<style scoped></style>
